<template>
  <el-popover
    placement="left"
    width="160"
  >
    <div class="coupon">
      <div
        class="couponStyle"
        @click="couponEv(index)"
        v-for="(item,index) in couponList"
        :key="index"
      >
        {{item.name}}：<span class="moent">￥{{item.denomination}}</span>
        <svg-icon
          v-if="show||item.isActive"
          icon-class="yes"
        />
      </div>
    </div>
    <span
      class="colorF40"
      slot="reference"
    >
      <slot></slot>
    </span>
  </el-popover>
</template>
<script>
export default {
  model: {
    props: 'value',
    event: 'input',
  },
  props: {
    value: {
      default: '',
    },
    list: {
      type: Array,
      default: () => { return [] }
    },
    show: {
      types: Boolean,
      default: false
    }
  },
  data () {
    return {
      couponList: [],
      couponDiscount: 0,//选中金额
      checkCoupon: [],
    }
  },
  watch: {
    list: {
      deep: true,
      handler (nV, oV) {
        this.couponList = nV;
      }
    }
  },

  methods: {
    //计算优惠金额
    computCouponAmount () {
      let sum = 0, arry = [];
      this.couponList.forEach(item => {
        if (item.isActive) {
          sum += Number(item.denomination)
          arry.push(item.id)
        }
      })
      this.$emit('input', sum)
      this.couponDiscount = sum;
      this.checkCoupon = arry;
    },
    couponEv(index) {
      this.couponList[index].isActive = !this.couponList[index].isActive;
      this.computCouponAmount();
    }
  },
  created () {
    this.couponList = this.list;
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-popover {
  width: 300px !important;
}
.couponStyle {
  cursor: pointer;
  font-size: 14px;
  width: 100%;
  border-bottom: 1px solid black;
  height: 40px;
  line-height: 40px;
  .moent {
    color: #f40;
  }
}
.coupon {
  cursor: pointer;
}
.colorF40 {
  color: #f40;
}
</style>